<template>
  <h2 class="title">{{ objData.title }}</h2>
  <div class="title">{{ objData.description }}</div>
  <el-form :model="formData" class="demo-form-inline">
    <el-form-item label="单位：">
      <el-select v-model="formData.region" placeholder="" clearable>
      </el-select>
    </el-form-item>
    <el-form-item label="系统：">
      <el-select v-model="arrData" placeholder="" multiple clearable>
        <el-option v-for="item in arrData" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <div v-for="(item, index) in moduleName.sections" :key="index">
      <h3>{{ item.title }}</h3>
      <div v-for="(itemVal, indexVal) in item.questions" :key="indexVal">
        <h5>{{ itemVal.text }}</h5>
        <div>
          <el-checkbox-group v-for="(radioData) in itemVal.options" :key="radioData" v-model="radio" @change="getRadio(itemVal.id)">
            <div class="radio-kine">
              <el-popover placement="bottom" title="选择系统" :width="200" trigger="click">
                <template #reference>
                  <el-checkbox :value="radioData" @click="getWenti(radioData, itemVal.id)">{{ radioData }}</el-checkbox>
                </template>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox v-for="item_xitong in arrData" :key="item_xitong" :label="item_xitong"
                    :value="item_xitong" :disabled="getdisabled(item_xitong)" @change="getxitong(itemVal.id)" />
                </el-checkbox-group>
              </el-popover>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <p>
      {{ objData.endSay }}
    </p>
    <el-input v-model="textarea" :rows="4" type="textarea" placeholder="" />
    <p>
      {{ objData.againEndSay }}
    </p>
  </el-form>
  <el-button type="primary" @click="SutGetData" style="width: 100%;">提交</el-button>
</template>
<script setup>
import { ref, reactive } from 'vue'
import moduleName from '@/assets/radio.js';
const formData = reactive({
  unitName: "",
  systemNames: [
    "营销智慧引擎",
    "计量全寿命周期管理系统"
  ],
  systemIds: [],
  remarks: [],
  value: []
})
const arrData = ref(["营销智慧引擎", "用电信息采集系统"])
const subData = ref([])    //  随时更新的提交数据
const radio = ref([])    //  问题选中数组
const checkList = ref([])  //  当前答案数组
const disabledArr = ref([])  //  当前答案数组
const textarea = ref()
const Wenti = ref('')  // 当前点击的问题
const objData = reactive(
  moduleName
)


const getdisabled = (val) => {
  return disabledArr.value.includes(val)
}
//  获取点击的问题
const getWenti = (wentiVal, id) => {
  Wenti.value = wentiVal
  disabledArr.value = []
  // 给提交数据添加问题 
  if (!subData.value.some(item => item.id == id && item.wenti == wentiVal)) {
    subData.value.push({ wenti: wentiVal, id: id, daan: [] })
  }
  subData.value.forEach(((item, index) => {
    if (item.id == id && item.wenti == Wenti.value) {
      checkList.value = subData.value[index].daan
    }
  }))
  subData.value.forEach(((item, index) => {
    if (item.id == id) {
      item.daan.forEach((item => {
        disabledArr.value.push(item)
      }))
    }
    if (item.id == id && item.wenti == Wenti.value) {
      disabledArr.value = disabledArr.value.filter(itemVal => !item.daan.includes(itemVal));
    }
  }))
}

const getRadio = (id) => {
  //  删除当前点击的问题，不让他立即选中
  subData.value.forEach((item => {
    if (item.id == id && item.wenti == Wenti.value && item.daan.length == 0) {
      radio.value = radio.value.filter(item => item !== Wenti.value);
    } else {
      radio.value.push(Wenti.value)
    }
  }))
}

const getxitong = (id) => {
  //  给问题添加答案
  subData.value.forEach(((item, index) => {
    if (item.wenti == Wenti.value && item.id == id) {
      subData.value[index].daan = checkList.value
      if (subData.value[index].daan) {
        radio.value = radio.value.filter(item => item !== Wenti.value);
      }
    }
    if (item.daan.length > 0) {
      radio.value.push(item.wenti)
    }
  }))

}
//  提交数据
const SutGetData = () => {
  console.log(subData.value)
}
</script>
<style scoped>
.title {
  color: #000;
  text-align: center;
}

.demo-form-inline {
  width: 600px;
  margin: 20px auto;
}

.radio-kine {
  line-height: 40px;
}
</style>
